<template>
  <div class="error-wrapper wh-100">
    <div class="error-content po-cc">
      <div class="error-img">
        <img class="wh-100" src="../assets/error.gif" alt="" />
      </div>
      <div class="error-text" v-if="errorTextList.length > 0">
        <p v-for="(item, index) in errorTextList" :key="index">{{ item }}</p>
      </div>
      <div class="quit-btn">
        <el-button type="primary" @click="toQuitFn">退出</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "error",
  components: {},
  props: ["errTxt", "errTxtList"],
  data() {
    return {
      errorTextList: [
        "页面应该是有问题了！！！",
        "我劝你还是退出吧！！！",
        "小垃圾~~~~~",
      ],
    };
  },
  created() {
    //处理错误信息
    this.handlerErrTxtFn(this.errTxt?this.errTxt:this.errTxtList)
  },
  mounted() {},
  methods: {
    handlerErrTxtFn(val) {
      if (!val) return;
      if (typeof val === "string") {
        this.errorTextList = [val];
      } else {
        this.errorTextList = [...this.errTxtList];
      }
    },
    toQuitFn(){
        console.log('退出')
    }
  },
};
</script>

<style lang="scss" scoped>
.error-wrapper {
  min-width: 300px;
  min-height: 300px;
  background-color: rgba($color: #000, $alpha: 0.7);
  position: relative;
}
.error-content {
  box-sizing: border-box;
  padding: 40px;
}
.error-img {
  width: 300px;
  height: 300px;
  margin: 0 auto;
}
.error-text {
  font-size: 40px;
  font-weight: 700;
  font-family: "Lato";
  color: $cl-0ff;
  text-align: center;
  p {
    margin-bottom: 10px;
  }
}
</style>
